<template>
  <!--系统配置-->
  <div class="search">
    <a-card :bordered="false">
      <a-tabs @tabClick="handleTabClick"  :defaultActiveKey="current" v-model="current">
        <a-tab-pane tab="文件存储" key="form1">
          <oss-form style="width: 80%" ref="form1"></oss-form>
        </a-tab-pane>
        <a-tab-pane tab="短信" key="form2">
          <sms-form style="width: 80%" ref="form2"></sms-form>
        </a-tab-pane>
        <a-tab-pane tab="推送" key="form3">
          <push-form style="width: 80%" ref="form3"></push-form>
        </a-tab-pane>
        <a-tab-pane tab="即时通讯" key="form4">
          <im-form style="width: 80%" ref="form4"></im-form>
        </a-tab-pane>
        <a-tab-pane tab="个性功能" key="form100">
          <prod-form style="width: 80%" ref="form100"></prod-form>
        </a-tab-pane>
      </a-tabs>
      <div class="tab-footer">
        <a-button type="primary" @click="handleSubmit" :loading="saving">保存</a-button>
      </div>

    </a-card>

  </div>
</template>
<script>


  import OssForm from './tab1'
  import SmsForm from './tab2'
  import PushForm from './tab3'
  import ImForm from './tab4'
  import ProdForm from './tab100'

  export default {
    name: 'userModal',
    props: {},
    data () {
      return {
        saving: false,
        current: 'form1',
        forms: [
          'form1',
          'form2',
          'form3',
          'form4',
          'form100'
        ]
      }
    },
    methods: {
      handleSubmit () {
        this.$refs[this.current].handleSubmit()
      },
      handleTabClick (name) {
        this.current = name
        this.$nextTick(() => {
          this.$refs[this.current].setData()
        })
      }
    },
    created () {
    },
    components: { PushForm, SmsForm, OssForm,ImForm,ProdForm }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
